<template>
  <div class="search-header">
    <div class="search-left">
      <!-- <select id="search-way">
				<option value="1">模糊查询(like)</option>
				<option value="2">精确查询(equal)</option>
			</select> -->
      <div>
        <select id="search-obj" v-model="selectedOption">
          <option value="id">id</option>
          <option value="vid">vid</option>
          <option value="views">view</option>
          <option value="">无</option>
        </select>
      </div>

      <div>
        <input type="text" v-model="inputValue" style="width: 400px; height: 48px" />
        <button @click="searchData()" style="height: 48px; width: 60px">查询</button>
        <button @click="exportData()" style="height: 48px; width: 60px">导出</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import emitter from '@/utils/evenBus'; // 引入事件总线

// 使用 ref 定义响应式数据来存储选择框和输入框的值
const selectedOption = ref('');
const inputValue = ref('');

function searchData() {
  const queryData = {
    [selectedOption.value]: inputValue.value
  };
  // 发送查询事件，并传递查询数据
  emitter.emit('searchData', queryData);
}

function exportData() {
  // 触发导出事件
  emitter.emit('exportData');
}
</script>

<style lang="scss" scoped>
.search-header {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .search-left {
    display: flex;
    // justify-content: center;
    align-items: center;
    width: 70%;
    height: 100%;

    // background-color: aliceblue;
    #search-obj {
      width: 100px;
      height: 30px;
      border-radius: 40px;
      background-color: #f8fafd;
      margin: 0px 10px 0px 10px;
    }

    #search-way {
      width: 110px;
      height: 30px;
      border-radius: 40px;
      background-color: #f8fafd;
      margin: 0px 10px;
    }

    input {
      width: 100px;
      height: 30px;
      border-radius: 10px;
      border: none;
      margin: 0px 10px 0px 0px;
    }

    input:hover {
      border: 3px solid #cfffff;
    }

    input:focus {
      border: 3px solid #25ff22;
      outline: none;
    }

    button {
      width: 40px;
      height: 30px;
      border: none;
      background-color: rgba(255, 255, 255, 0.5);
      /* 背景颜色，这里设置为白色，透明度为0.5 */
      backdrop-filter: blur(10px);
      /* 模糊效果，值越大越模糊 */
    }

    button:hover {
      background-color: #ffa117;
    }
  }

  .search-right {
    width: 30%;
    height: 100%;
    // background-color: #efff3e;
    display: flex;
    // justify-content: center;
    align-items: center;

    button {
      width: 80px;
      height: 40px;
      border: none;
      background-color: rgba(255, 255, 255, 0.5);
      /* 背景颜色，这里设置为白色，透明度为0.5 */
      backdrop-filter: blur(10px);
      /* 模糊效果，值越大越模糊 */
      margin-left: 50%;
    }

    button:hover {
      background-color: #aaaaff;
    }
  }
}
</style>
